<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>遇见沧州 - 运河古城的魅力</title>
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
  <!-- Navigation Bar -->
  <nav class="navbar">
    <div class="logo">
      <i class="fas fa-landmark"></i>
      <span>遇见沧州</span>
    </div>
    <div class="nav-links" id="navLinks">
      <a href="#home">首页</a>
      <a href="#history">历史</a>
      <a href="#attractions">景点</a>
      <a href="#culture">文化</a>
      <a href="#contact">联系</a>
    </div>
    <button class="book-btn">预约导览</button>
    <div class="menu-toggle" id="menuToggle">
      <i class="fas fa-bars"></i>
    </div>
  </nav>

  <!-- Hero Section -->
  <section id="home" class="section hero">
    <div class="hero-bg"></div>
    <div class="hero-content animate-element">
      <h1>遇见沧州</h1>
      <p>千年运河古城，文化瑰宝，等待您的探索</p>
      <div class="hero-buttons">
        <button class="primary-btn">探索景点</button>
        <button class="outline-btn">文化之旅</button>
      </div>
    </div>
    <div class="scroll-indicator">
      <i class="fas fa-chevron-down"></i>
    </div>
  </section>

  <!-- History Section -->
  <section id="history" class="section">
    <div class="container">
      <div class="section-header animate-element">
        <h2>千年古城</h2>
        <p>探索沧州悠久的历史文化遗产</p>
      </div>
      <div class="history-content">
        <div class="history-image animate-left">
          <img src="../assets/照片/沧州市区/运河古画.jpg" alt="沧州运河古画">
        </div>
        <div class="history-text animate-right">
          <p>沧州，因"海滨多苇泽"而得名，是一座具有两千多年历史的古城。这里是大运河的重要枢纽，见证了中国水运文明的发展历程。</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Attractions Section -->
  <section id="attractions" class="section">
    <div class="container">
      <div class="section-header animate-element">
        <h2>特色景点</h2>
        <p>探索沧州独特的文化地标</p>
      </div>
      <div class="attractions-grid">
        <div class="attraction-card animate-scale">
          <div class="attraction-img">
            <img src="../assets/照片/沧州市区/铁狮子.webp" alt="沧州铁狮子">
            <div class="attraction-overlay">
              <h3>沧州铁狮子</h3>
            </div>
          </div>
          <div class="attraction-content">
            <p>中国现存最古老的铸铁艺术品，被誉为"中华第一狮"。</p>
            <button class="secondary-btn">了解更多</button>
          </div>
        </div>

        <div class="attraction-card animate-scale">
          <div class="attraction-img">
            <img src="../assets/照片/沧州市区/大运河博物馆.webp" alt="大运河博物馆">
            <div class="attraction-overlay">
              <h3>大运河博物馆</h3>
            </div>
          </div>
          <div class="attraction-content">
            <p>展示运河文化与沧州历史，是了解运河文明的重要窗口。</p>
            <button class="secondary-btn">了解更多</button>
          </div>
        </div>

        <div class="attraction-card animate-scale">
          <div class="attraction-img">
            <img src="../assets/照片/沧州市区/古楼.jpg" alt="沧州古楼">
            <div class="attraction-overlay">
              <h3>沧州古楼</h3>
            </div>
          </div>
          <div class="attraction-content">
            <p>始建于明代的标志性建筑，见证了沧州的历史变迁。</p>
            <button class="secondary-btn">了解更多</button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Culture Section -->
  <section id="culture" class="section">
    <div class="container">
      <div class="section-header animate-element">
        <h2>文化瑰宝</h2>
        <p>体验沧州独特的文化魅力</p>
      </div>
      <div class="culture-grid">
        <div class="culture-item animate-element">
          <i class="fas fa-dragon"></i>
          <h3>武术之乡</h3>
          <p>沧州是中国著名的武术之乡，八极拳、形意拳等流派享誉海内外。</p>
        </div>
        <div class="culture-item animate-element">
          <i class="fas fa-utensils"></i>
          <h3>特色美食</h3>
          <p>品尝地道的沧州特色小吃，感受运河文化的味道。</p>
        </div>
        <div class="culture-item animate-element">
          <i class="fas fa-mask"></i>
          <h3>传统艺术</h3>
          <p>杂技、皮影戏等非物质文化遗产在这里代代相传。</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact" class="section">
    <div class="container">
      <div class="section-header animate-element">
        <h2>联系我们</h2>
        <p>了解更多沧州旅游信息</p>
      </div>
      <div class="contact-form animate-element">
        <form>
          <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" id="name" placeholder="请输入您的姓名">
          </div>
          <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" placeholder="请输入您的邮箱">
          </div>
          <div class="form-group">
            <label for="interest">感兴趣的景点</label>
            <select id="interest">
              <option value="">请选择</option>
              <option value="lion">铁狮子</option>
              <option value="museum">运河博物馆</option>
              <option value="tower">沧州古楼</option>
              <option value="other">其他景点</option>
            </select>
          </div>
          <div class="form-group">
            <label for="message">留言</label>
            <textarea id="message" rows="4" placeholder="请输入您的留言..."></textarea>
          </div>
          <button type="submit" class="primary-btn">提交</button>
        </form>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="container">
      <div class="footer-content">
        <div class="footer-info">
          <h3><i class="fas fa-landmark"></i> 遇见沧州</h3>
          <p>地址：河北省沧州市运河区</p>
          <p>电话：0317-XXXXXXX</p>
          <p>邮箱：info@cangzhou-tourism.com</p>
        </div>
        <div class="footer-social">
          <a href="#"><i class="fab fa-weixin"></i></a>
          <a href="#"><i class="fab fa-weibo"></i></a>
          <a href="#"><i class="fas fa-envelope"></i></a>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2025 遇见沧州 版权所有</p>
      </div>
    </div>
  </footer>

  <script src="index.js"></script>
</body>
</html>
